{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>__TITLE__</title>
  <meta name="viewport" content="target-densitydpi=320,width=640,min-height:900px;user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="format-detection" content="telephone=no">
  <meta content="telephone=no" name="format-detection">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" type="text/css" href="__MDRES__/MicroShow/tpl/common.css">
  <link rel="stylesheet" type="text/css" href="__MDRES__/MicroShow/tpl/musicdiv.css">
  <script src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
  <script src="__COMMON__/js/zepto/zepto.min.js" charset="utf-8"></script>
  <script src="__STYLE__/DisShop/script/app.js" charset="utf-8"></script>
  <script src="__MDRES__/MicroShow/tpl/autoHeight.js" charset="utf-8"></script>
  <style type="text/css">
	.content-model {
		position: absolute;
		top: 80px;
		left: 20px;
		width: 580px;
		height: auto;
		font-size: 18px;
		font-weight: 500;
		line-height: 28px;
		padding: 10px;
		display: none;
		overflow: auto;
		background: rgba(255,255,255,0.99);
		background-color: rgb(255,255,255)\9;
		filter: alpha(opacity=99);
		z-index: 103;
		border-radius: 5px;
		-moz-border-radius: 5px;
	}
  </style>
  <style>
		body {
			background: #f8f7f5;
			color: #222;
			font-family: Microsoft YaHei, Helvetica, STHeiti STXihei, Microsoft JhengHei, Tohoma, Arial;
			height: 100%;
			padding: 0;
			position: relative;
			margin: 0;
		}
		body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }
		ul li {
			list-style:none;
		}
		input, textarea, select {
			font-size: 100%;
		}

		div#header{
			position:relative;    
			border:0px; 
			width:640px;		
			height:352px;
			margin:0 auto; 
			top:0px;    
			overflow:hidden;   
			clear:both;
		}
		div#content{
			position:relative;    
			border:0px; 
			width:640px;		
			min-height: 700px;
			margin:0 auto; 
			clear:both;
		}
		#page-content p {
			margin:0px;
			padding: 4px 22px 15px 25px;
			font-size: 32px;
			line-height: 1.5em;
		}
		#content {
			background: #e3e0cd;
		}
		#page-content p {
			color: #654a37;
			word-wrap: break-word;
		}
		#page-content p:after {
			content: "\200B";
			display: block;
			height: 0;
			clear: both;
		}
		p .button {padding: 15px; font-size: 28px;}
		
		.u-arrow {
			position: fixed;
			bottom: 30px;
			left: 50%;
			z-index: 150;
			width: 80px;
			height: 80px;
			margin-left: -39px;
		}
		.u-arrow p {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -14px 0 0 -25px;
			width: 50px;
			height: 28px;
			-webkit-animation: start 1.5s infinite ease-in-out;
			-moz-animation: start 1.5s infinite ease-in-out;
			animation: start 1.5s infinite ease-in-out;
		}
		.css_sprite01 {
			background-image: url(__STYLE__/DisShop/images/css_sprite01.png)!important;
			background-repeat: no-repeat!important;
		}
		@-webkit-keyframes start {
			0%,30% {opacity: 0;-webkit-transform: translate(0,10px);} 
			60% {opacity: 1;-webkit-transform: translate(0,0);}
			100% {opacity: 0;-webkit-transform: translate(0,8px);} 
		}
		/* ------------ SYMBOL CSS -------------- */
	</style>
	<block name="symbol_style"></block>
</head>
<body>
	<div id="header">  								
		<block name="header"></block>
	</div>
	<div id="content">
	    <div style="width:0;height:0;" id = "audiocontainer"></div>
		<div id="page-title">
			<h1 class="page-title" style="margin: 0px 0px;padding:9px 40px">{$microShow['title']}</h1>
			<span style="padding-left: 40px;color:#5e5e5e">{$microShow['createTime']|date='Y-m-d H:i:s',###}</span>
			<if condition="$mode eq 'edit'">
			<div class="operates">
				<p style="padding: 0px 19px;"><a id="btn-change-music" class="button orange" href="javascript:;">换音乐</a> <a id="btn-change-bg" class="button blue" href="javascript:;">换背景</a> <a id="btn-modify-content" class="button rosy" href="javascript:;">改内容</a></p>
			</div>
			<else/>
			<div class="operates">
				<p style="padding: 0px 19px;"><if condition="$microShowConfig['subscribe_url']"><a class="button super green" href="{$microShowConfig['subscribe_url']}">点这里，自己做微秀</a></if></p>
			</div>
			</if>
		</div>
		<div id="page-content">
			<foreach item="vo" name="microShow['config']" key="key">
				<if condition="$vo['type'] eq 'text'">
					<p style="text-indent: .2em;">{$vo['content']}</p>
				<elseif condition="$vo['type'] eq 'image'"/>
					<p style="text-align: center;"><img style="width: 100%;" src="{$vo['url']}" /></p>
				</if>
			</foreach>
		</div>
	</div>
	
	<script type="text/javascript">
	var gSound = "{$gSound}";
	
	var pop_up_note_mode = true;
	var note_id = 1;
	
	function get(name) {
		  return document.getElementById(name);
	}
	  
	function switchsound() {
		au = get('bgsound');
		ai = get('sound_image');
		if(au.paused) {
			au.play();
			ai.src = "http://res.iweshow.com.cn/weshow/music_note_big.png";
			pop_up_note_mode = true;
			popup_note();
			get("music_txt").innerHTML = "播放";
			get("music_txt").style.visibility = "visible";
			setTimeout(function(){get("music_txt").style.visibility="hidden"}, 2500);
		} else {
			pop_up_note_mode = false;
			au.pause();
			ai.src = "http://res.iweshow.com.cn/weshow/music_note_big.png";
			get("music_txt").innerHTML = "暂停";
			get("music_txt").style.visibility = "visible";
			setTimeout(function(){get("music_txt").style.visibility="hidden"}, 2500);
		}
	}
		
	function playbksound() {
		var audiocontainer = document.getElementById('audiocontainer');
		
		if(audiocontainer != undefined) {
			audiocontainer.innerHTML = '<audio id="bgsound" loop="loop" autoplay="autoplay"> <source src="' + gSound + '" /> </audio>';
		}
		
		var audio = document.getElementById('bgsound');
		audio.src = gSound;
		audio.play();
		
		sound_div = document.createElement("div");
		sound_div.setAttribute("ID", "cardsound");
		sound_div.style.cssText = "position:fixed;right:20px;top:40px;z-index:50000;visibility:visible;";
		sound_div.onclick = switchsound;
		if(document.body.offsetWidth > 400) {
		    bg_htm = "<img id='sound_image' src='http://res.iweshow.com.cn/weshow/music_note_big.png'>";
	    	box_htm = "<div id='note_box' style='height:100px;width:44px;position:absolute;left:-20px;top:-80px'></div>";
		} else {
		    bg_htm = "<img id='sound_image' width='30px' src='http://res.iweshow.com.cn/weshow/music_note_big.png'>";
	    	box_htm = "<div id='note_box' style='height:100px;width:44px;position:absolute;left:-5px;top:-80px'></div>";
		}
		txt_htm = "<div id='music_txt' style='color:white;position:absolute;left:-40px;top:30px;width:60px'></div>"
		sound_div.innerHTML = bg_htm + box_htm + txt_htm;
		document.body.appendChild(sound_div);
		setTimeout("popup_note()", 100);
	}
	
	function on_pop_note_end(event) {
		note = event.target;
		if(note.parentNode == get("note_box")) {
			get("note_box").removeChild(note);
		}
	}
	
	function popup_note() {
		box = get("note_box");
		note = document.createElement("span");
		note.style.cssText = "visibility:visible;position:absolute;background-image:url('http://res.iweshow.com.cn/weshow/music_note_small.png');width:15px;height:25px";
		note.style.left = Math.random() * 20 + 20;
		note.style.top = "75px";
		this_node = "music_note_" + note_id;
		note.setAttribute("ID", this_node);
		note_id += 1;
		scale = Math.random() * 0.4 + 0.4;
		note.style.webkitTransform = "rotate(" + Math.floor(360 * Math.random()) + "deg) scale(" + scale + "," + scale + ")";
		note.style.webkitTransition = "top 2s ease-in, opacity 2s ease-in, left 2s ease-in";
		note.addEventListener("webkitTransitionEnd", on_pop_note_end);
		box.appendChild(note);
	
		setTimeout("document.getElementById('" + this_node + "').style.left = '0px';", 100);
		setTimeout("document.getElementById('" + this_node + "').style.top = '0px';", 100);
		setTimeout("document.getElementById('" + this_node + "').style.opacity = '0';", 100);
		
		if(pop_up_note_mode)
		{
			setTimeout("popup_note()", 600);
		}	
	}
	
	$(function() {
		playbksound();
	});
	</script>
	
	<if condition="$mode eq 'edit'">
	  <style>
		.closeModel{
			position: absolute;
			top: 10px;
			left: 530px;
			width: 39px;
			height: 39px;
		}
		.content-model{
			position: absolute;
			top: 80px;
			left: 20px;
			width: 580px;
			height: auto;
			font-size: 32px;
			font-weight: 700;
			line-height: 48px;
			padding: 10px;
			display:none;
			overflow:auto;
			background: rgba(255,255,255,0.99);
			background-color:rgb(255,255,255)\9 ;
			filter:alpha(opacity=99);
			z-index:103;
			border-radius:5px;
			-moz-border-radius:5px; /* 老的 Firefox */
		}
		.closeModify{
			position: absolute;
			top: 10px;
			left: 530px;
			width: 39px;
			height: 39px;
		}
		ul.bg-list {
			margin: 0px;
		}
		ul.bg-list li {
			float:left;
			padding:15px 0px 0px 15px;
		}	
		ul.bg-list li img {
			margin:8px;
			width: 150px;
			height: 200px;
		}
		ul.bg-list a {
			display: block;
			border: 1px solid #ccc;
			box-shadow: 5px 5px 3px #eee;	
		}
		ul.music-list li {
			line-height: 76px;
		}
	  </style>
	  <div id="bg-model" class="content-model">
		  <div class="closeModify">
			<img src="http://res.iweshow.com.cn/weshow/close_button.png" width="60px">
		  </div>
		  <div style="min-height:100px; margin-top: 49px; margin-bottom: 20px; display: inline-block;">
			<ul class="bg-list">
				<volist id="vo" name="microShowTplList">
				<li tpl-id="{$vo['id']}">
					<a><img src="{$vo['image']}"/></a>
				</li>
				</volist>
			</ul>
		  </div>
	  </div>
	  <div id="music-model" class="content-model">
		  <div class="closeModify">
			<img src="http://res.iweshow.com.cn/weshow/close_button.png" width="60px">
		  </div>
		  <div style="min-height:100px; margin-top: 49px; margin-bottom: 20px; display: inline-block; width:100%">
			<ul class="music-list" style="width:100%; padding:0px;">
				<li music-id="0" style="padding-left:25px;width:90%">
					<a><img src="http://res.iweshow.com.cn/weshow/ms.png"/></a>
					无音乐
					<a class="button orange" style="float:right;margin-top: 5px; padding: 15px;font-size: 28px;">确定</a>
					<div id='md' style='float:right;display:none;margin-top: 19px;'><div id='bo'><div id='bo-1'><div id='bo-2'></div><div id='bo-3'></div><div id='bo-4'></div><div id='bo-5'></div><div id='bo-6'></div><div id='bo-7'></div><div id='bo-8'></div><div id='bo-9'></div><div id='bo-10'></div><div id='bo-11'></div><div id='bo-12'></div><div id='bo-13'></div><div id='bo-14'></div><div id='bo-15'></div><div id='bo-16'></div><div id='bo-17'></div></div></div></div>
				</li>
				<volist id="music" name="musicList">
				<li music-id="{$music['id']}" style="padding-left:25px;width:90%">
					<a><img src="http://res.iweshow.com.cn/weshow/ms.png"/></a>
					{$music['name']}
					<a class="button orange" style="float:right;margin-top: 5px;padding: 15px;font-size: 28px;">确定</a>
					<div id='md' style='float:right;display:none;margin-top: 19px;'><div id='bo'><div id='bo-1'><div id='bo-2'></div><div id='bo-3'></div><div id='bo-4'></div><div id='bo-5'></div><div id='bo-6'></div><div id='bo-7'></div><div id='bo-8'></div><div id='bo-9'></div><div id='bo-10'></div><div id='bo-11'></div><div id='bo-12'></div><div id='bo-13'></div><div id='bo-14'></div><div id='bo-15'></div><div id='bo-16'></div><div id='bo-17'></div></div></div></div>
				</li>
				</volist>
			</ul>
		  </div>
	  </div>
	  <div id="modify-model" class="content-model">
	      <form>
		  <div class="closeModify">
			<img src="http://res.iweshow.com.cn/weshow/close_button.png" width="60px">
		  </div>
		  <div style="min-height:100px; margin-top: 49px; margin-bottom: 20px; display: inline-block;">
			<ul class="modify-list">
				<li>
					<label style="color:#ff6600;text-align:left;margin-left:15px;margin-top:20px;margin-bottom:15px;">标题：</label>
					<input type="text" name="title" value="{$microShow['title']}" style="width:90%;padding:10px;margin-left:15px;height:1.78em;">
				</li>
				<li>
					<label style="color:#ff6600;text-align:left;margin-left:15px;margin-top:20px;margin-bottom:15px;">正文：</label>
					<ul class="edit-list" style="padding: 0px;">
					<foreach item="vo" name="microShow['config']" key="key">
					    <li id="li{$key}">
						<if condition="$vo['type'] eq 'text'">
							<textarea id="t{$key}" name="config[{$key}][content]" cols="30" style="height: 62px; width: 90%; overflow-y: hidden; margin: 10px 0px 10px 15px; padding: 10px;" name="a0" minheight="0" maxheight="1000">{$vo['content']}</textarea>
							<script>$("#t{$key}").textareaAutoHeight();</script>
						<elseif condition="$vo['type'] eq 'image'"/>
							<img width="50%" src="{$vo['url']}">
							<input type="hidden" name="config[{$key}][url]" value="{$vo['url']}" />
							<a id="btn-delete-{$key}" class="button blue" href="javascript:;" onclick="$('#li{$key}').remove();">删除</a>
						</if>
						</li>
					</foreach>
					</ul>
				</li>
				<li>
				    <input type="hidden" name="sid" value="{$sid}"> 
				    <input type="hidden" name="id" value="{$microShow['id']}">
				    <p>
						<a id="btn-save-modify" class="button blue" href="javascript:;">保存</a>
					</p>
				</li>
			</ul>
		  </div>
		  </form>
	  </div>
	  
	  <script type="text/javascript">
	    var id = {$microShow['id']}, sid = {$sid};
	    function closeModifyModel() {
	    	$("#modify-model").hide();
	    }
	  	$(function() {
	  		$('.closeModify').click(function() {
	  			$(this).parents(".content-model").hide();
	  		});
	  		
	  		$("#btn-change-bg").click(function() {
	  			$("#bg-model").show();
	  		});
	  		$("ul.bg-list").delegate("li", "click", function() {
	  			$.post('__CONTROLLER__/changeBg', {"id":id, "tplId": $(this).attr("tpl-id"), "sid" : sid}, function(data) {
	  				if( !data['error'] ) {
	  					window.location.reload();
	  				} else {
	  					APP.alert(data['msg']);
	  				}
	  			});
	  		});
	  		
	  		$("#btn-modify-content").click(function() {
	  			$("#modify-model").show();
	  		});
	  		$("#btn-save-modify").click(function() {
	  			var data = $("#modify-model form").serialize();
	  			$.post('__CONTROLLER__/modifyPost', data, function(data) {
	  				if( !data['error'] ) {
	  					window.location.reload();
	  				} else {
	  					APP.alert(data['msg']);
	  				}
	  			});
	  		});
	  	});
	  </script>
	  
	  <script type="text/javascript">
	  var musicList = {:json_encode((object)$musicList)};
	  $(function() {
		  
		  $("#btn-change-music").click(function() {
				$("#music-model").show();
		  });
				
		  $(".music-list").delegate("li", "click", function() {
		     var id = $(this).attr("music-id"),
		     	music = musicList[id]
		     	audio = $("#bgsound").get(0);
		     if ( !audio ) {
		    	 $("#audiocontainer").html('<audio id="bgsound" loop="loop" autoplay="autoplay"></audio>');
		    	 audio = $("#bgsound").get(0);
		     }
		      audio.pause();
		      audio.src =  music?music['url']:"";
		      id*1 && audio.play();
		      $(".music-list #md").hide();
		      id*1 && $(this).find("#md").show();
		  });
		  
		  $(".music-list").delegate(".button", "click", function() {
			  var musicId = $(this).parents("li").attr("music-id");
			  $.post('__CONTROLLER__/changeMusic', {"id":id, "musicId": musicId, "sid" : sid}, function(data) {
				 if( !data['error'] ) {
					window.location.reload();
				 } else {
					APP.alert(data['msg']);
				 }
			  });
	 	  });
		  
	  });
	  </script>
	</if>
	
	<script type="text/javascript">
	  $(function() {
			wx.config({
				debug: false,
				appId: "{$wxConfig['appId']}",
				timestamp: "{$wxConfig['timestamp']}",
				nonceStr: "{$wxConfig['nonceStr']}",
				signature: "{$wxConfig['signature']}",
				jsApiList: [
					// 所有要调用的 API 都要加到这个列表中
					'onMenuShareTimeline',
					'onMenuShareAppMessage',
					'hideMenuItems',
					'showAllNonBaseMenuItem',
					'checkJsApi'
				]
			});
			wx.checkJsApi({
			    jsApiList: ['onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
			    success: function(res) {
			        // 以键值对的形式返回，可用的api值true，不可用为false
			        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
			    }
	  		});
			wx.ready(function() {
			    wx.onMenuShareAppMessage({
				    title: "{$share['title']}", // 分享标题
				    desc: "{$share['desc']}", // 分享描述
				    link: "{$share['link']}", // 分享链接
				    imgUrl: "{$share['imgUrl']}", // 分享图标
				    success: function () { 
				        // 用户确认分享后执行的回调函数
				    },
				    cancel: function () { 
				        // 用户取消分享后执行的回调函数
				    }
				});
				wx.onMenuShareTimeline({
				    title: "{$share['title']}", // 分享标题
				    link: "{$share['link']}", // 分享链接
				    imgUrl: "{$share['imgUrl']}", // 分享图标
				    success: function () { 
				        // 用户确认分享后执行的回调函数
				    },
				    cancel: function () { 
				        // 用户取消分享后执行的回调函数
				    }
				});
			});	
				
			wx.error(function( res ){
				alert('您的公众平台配置不正确错误信息:'+res['errMsg']);
			});
	  });
	</script>
	<block name="footer"></block>
	<section class="u-arrow"><p class="css_sprite01"></p></section>
</body>
</html>